import {View, Image, Text} from '@tarojs/components';
import {AtIcon, AtFloatLayout, AtInputNumber} from "taro-ui";
import React, { useEffect, useState } from 'react';
import Taro from '@tarojs/taro';
import {LabelList} from "../../../utils/server.interface";
import {EDIT_CAR} from '../../../constants/api';
import {http} from "../../../utils/http";
import {platform} from "../../../utils/platform-settting.service";
import './detail-bar.scss';

interface DetailBarType {
  carId: number
  productId: number
  stNum: number
  goods: LabelList[]
  isOpened: boolean
  stIndex: number
  img: string
  onOff: any
  gid: number
  num?: number
  onSave?: any
  isSeller?: boolean
}

const LabelCar: React.FC<DetailBarType> = (props) => {
  const [frist, setFrist] = useState(true)
  const [index, setIndex] = useState(props.stIndex)
  const [val, setVal] = useState(props.stNum)
  const [gid, setGid] = useState(props.gid)
  useEffect(() => {
    if (frist) {
      setIndex(props.stIndex)
      if (props.goods.length > 0) {
        setVal(props.goods[props.stIndex].buy_num_min || 1)
      }
      setGid(props.gid)
    }
  }, [frist, props.gid, props.goods, props.stIndex])
  const handleClose = () => {
    props.onOff()
    setFrist(true)
  }
  const onSave = async () => {
    if (props.isOpened) {
      const r = await http.postCondition(EDIT_CAR, {
        id: gid ? gid : props.gid,
        carId: props.carId,
        num: val,
        productId: props.productId
      })
      if (r) {
        props.onOff(gid ? gid : props.gid, val, props.goods[index].name, props.goods[index].price, props.goods[index].stock, props.goods[index].main_img)
        setIndex(index)
        Taro.showToast({
          title: '修改成功',
          icon: 'success',
          duration: 2000
        })
      } else {
      }
    } else {
    }
  }
  const handleChange = (val) => {
    setFrist(false)
    setVal(val)
  }
  const choiceSpecs = (i) => {
    setFrist(false)
    setIndex(i)
    setVal(props.goods[i].buy_num_min || 1)
    setGid(props.goods[i].id)
  }
  const showImg = () => {
    const urls = []
    let img = ''
    if (props.goods.length > 0) {
      img = props.goods[index].main_img
      props.goods.map(item => {
        urls.push(item.main_img)
      })
    }
    Taro.previewImage({
      current: img, // 当前显示图片的http链接
      urls// 需要预览的图片http链接列表
    })
  }
  return (
    <View className='detailBar' style='height: inherit !important;'>
      {props.goods.length > 0 &&
      <View>
        <AtFloatLayout isOpened={props.isOpened} onClose={handleClose.bind(this)}>
          <View className='choiceInfo-top'>
            <Image className='left-img' mode='aspectFill' onClick={showImg.bind(this)}
              src={props.goods[index].main_img + '?x-oss-process=image/resize,w_240'}
            />
            <View className='right-info'>
              <View className='price'>￥<Text
                className='new-price'
              >{props.goods[index].price}</Text>{process.env.DISTINGUISH_IDENTITY && !!props.goods[index].brokerage &&
              <Text>佣金￥<Text className='new-price'>{props.goods[index].brokerage}</Text></Text>}
                {process.env.DISTINGUISH_IDENTITY && !!props.goods[index].sellerBrokerage &&
                <Text>上级佣金￥<Text className='new-price'>{props.goods[index].sellerBrokerage}</Text></Text>}</View>
              {process.env.TARO_ENV !== 'tt' && process.env.P_ENV !== 'hiyogo' && !!platform.info.is_show_stock && <View className='stock'>库存：{props.goods[index].stock}</View>}
              {process.env.TARO_ENV === 'tt' && <View className='stock'>库存：{props.goods[index].stock}</View>}
              <View className='selected'>已选<Text>“{props.goods[index].name}”</Text></View>
              {process.env.DETAIL_SHOW_NO && props.isSeller && props.goods[index].no &&
              <View className='selected'>编号: <Text>{props.goods[index].no}</Text></View>}
            </View>
            <View className='close-btn' onClick={handleClose.bind(this)}>
              <AtIcon value='close-circle' size='20' color='#c6c6c6' />
            </View>
          </View>
          <View className='choiceInfo'>
            <View className='choice-specs'>
              <View className='choice-specs-title'>规格</View>
              <View className='choice-specs-list'>
                {props.goods.length > 0 && props.goods.map((item, i) =>
                  i == index
                    ? <Text onClick={choiceSpecs.bind(this, i)} className='choice-specs-item on'
                        key={i}
                    >{item.name}</Text>
                    : (item.stock > 0 && item.status == 0) ?
                    <Text onClick={choiceSpecs.bind(this, i)} className='choice-specs-item'
                      key={i}
                    >{item.name}</Text> :
                    <Text className='choice-specs-item disabled' key={i}>{item.name}</Text>
                )}
              </View>
            </View>
            <View className='choice-num-box'>
              <View className='choice-num'>
                <View className='choice-num-title'>购买数量</View>
                <AtInputNumber
                  type='number'
                  className='car-num-small2'
                  min={props.goods[index].buy_num_min || 0}
                  max={props.goods[index].buy_num_max}
                  step={1}
                  value={val}
                  onChange={handleChange.bind(this)}
                />
              </View>
            </View>
          </View>
        </AtFloatLayout>
        {props.isOpened && <View className='labelCar' style='background:#fff;'>
          <View className='label-car-btn' onClick={onSave.bind(this)}>确定</View>
        </View>}
        <View style='height: 20px;' />
      </View>
      }
    </View>
  )
}
LabelCar.defaultProps = {
  productId: 0,
  carId: 0,
  stNum: 0,
  gid: 0,
  num: 1,
  stIndex: 0,
  goods: [],
  img: '',
  isSeller: false,
  isOpened: false,
}

export default LabelCar
